<template>
	<view class="content">
		<view class="gradient-bg">
			<view class="flex-row-between" style="margin-bottom: 8rpx; margin-left: 28rpx; margin-top: 15rpx;">
				<view class="flex-row">
					<text class="white-text font-24">单据编号</text>
					<text class="white-text font-24" style="margin-left: 20rpx;">{{option.checkDetailNo}}</text>
				</view>
			</view>
			
			<scroll-view scroll-y class="card-list">
				<view v-if="detailData.length > 0" class="card-container">
					<view v-for="(item, index) in detailData" :key="index" class="card">
						<view class="card-header">
							<text class="card-index">{{index + 1}}</text>
							<text class="card-tray">托盘：{{item.trayNo || '--'}}</text>
						</view>
						<view class="card-body">
							<view class="card-row">
								<text class="label">物料编号：</text>
								<text class="value">{{item.productNo}}</text>
							</view>
							<view class="card-row">
								<text class="label">物料名称：</text>
								<text class="value">{{item.productName}}</text>
							</view>
							<view class="card-row">
								<text class="label">批次：</text>
								<text class="value">{{item.batchNo}}</text>
							</view>
							<view class="card-row">
								<text class="label">数量：</text>
								<text class="value">{{item.resultQty}} {{item.cgUnitName}}</text>
							</view>
							<view class="card-row input-row">
								<text class="label">实际数量：</text>
								<input 
									type="number" 
									v-model="item.checkQty"
									class="qty-input"
									placeholder="请输入"
								/>
							</view>
							<view class="card-row input-row">
								<text class="label">差异说明：</text>
								<textarea  
									v-model="item.diffDesc"
									class="text-input"
									placeholder="请输入说明"
								/>
							</view>
						</view>
					</view>
				</view>
				<view v-else class="empty-state">
					<text class="empty-text">暂无数据</text>
				</view>
			</scroll-view>

			<view @click="handleDispatch" v-if="detailData.length" class="botton p-botton font-30" :class="{'disabled': !detailData.length}" style="height: 92rpx; line-height:92rpx;margin: 50rpx 25rpx;">
				盘 点
			</view>
		</view>
		
		<!-- 输入弹窗 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog 
				mode="input" 
				title="请输入实际数量" 
				:value="currentValue"
				placeholder="请输入数量"
				@confirm="handleInputConfirm"
			></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		queryCheckDetailInfos,
		checkComplete
	} from "./api"

	export default {
		data() {
			return {
				detailData: [],
				currentValue: '',
				currentRow: null
			}
		},
		onLoad(option) {
			this.option = option;
			this.getTaskDetail();
		},
		methods: {
			getTaskDetail() {
				queryCheckDetailInfos(this.option).then(res => {
					if (res.code == 200) {
						this.detailData = res.data.map(item => ({
							...item,
							checkQty: item.checkQty || '',
							resultQty:Number(item.stockQty) / (Number(item.cgPsConver) * Number(item.ylPsConver)),
							diffDesc: item.diffDesc || ''
						}))
					}else{
						this.detailData = []
					}
				})
			},
			handleCellClick(row, column, index) {
				// 只有点击实际数量列才弹出输入框
				if (column.name === 'checkQty') {
					this.currentRow = row;
					this.currentValue = row.checkQty;
					this.$refs.inputDialog.open();
				}
			},
			handleInputConfirm(value) {
				if (this.currentRow) {
					this.currentRow.checkQty = value;
					this.$refs.inputDialog.close();
				}
			},
			validateData() {
				if (!this.detailData.length) {
					this.$modal.confirmClose('暂无数据可盘点');
					return false;
				}
				const emptyItems = this.detailData.filter(item => !item.checkQty);
				if (emptyItems.length > 0) {
					const itemNames = emptyItems.map((item, index) => {
						return `第${index + 1}行: ${item.productName}(${item.productNo})`;
					});
					this.$modal.confirmClose(`以下物料未填写实际数量：\n${itemNames.join('\n')}`);
					return false;
				}
				return true;
			},
			handleDispatch() {
				if (!this.validateData()) return;
				
				this.$modal.confirm('确定盘点？').then(() => {
					this.$modal.loading("加载中...")
					checkComplete(this.detailData).then(res => {
						this.$modal.closeLoading()
						if (res.code == 200) {
							this.$modal.msgSuccess("盘点成功")
						} else {
							res.msg && this.$modal.confirmClose(res.msg)
						}
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
.gradient-bg {
	min-height: 100vh;
	background-color: #F8F8F8;
	padding-bottom: env(safe-area-inset-bottom);
}

.card-list {
	width: 100%;
	height: calc(100vh - 180rpx);
	padding: 24rpx;
	box-sizing: border-box;
}

.card-container {
	width: 100%;
}

.card {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	margin-bottom: 24rpx;
	padding: 0;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
	overflow: hidden;
}

.card-header {
	display: flex;
	align-items: center;
	padding: 20rpx 24rpx;
	background: linear-gradient(to right, #E4F0F5, #F8F8F8);
	border-bottom: 2rpx solid #E4F0F5;
}

.card-index {
	background-color: #4A98CF;
	color: #FFFFFF;
	padding: 4rpx 16rpx;
	border-radius: 6rpx;
	font-size: 24rpx;
	margin-right: 20rpx;
}

.card-tray {
	color: #2C405A;
	font-size: 28rpx;
	font-weight: 500;
}

.card-body {
	display: flex;
	flex-direction: column;
	padding: 20rpx 24rpx;
}

.card-row {
	display: flex;
	align-items: center;
	padding: 12rpx 0;
	font-size: 26rpx;
	position: relative;

	&:not(:last-child) {
		border-bottom: 1rpx solid #F5F7FA;
	}
}

.label {
	color: #556B85;
	width: 160rpx;
	flex-shrink: 0;
	font-size: 26rpx;
}

.value {
	color: #2C405A;
	flex: 1;
	font-size: 26rpx;
}

.input-row {
	margin-top: 4rpx;
	padding: 16rpx 0;
	background-color: #FAFBFC;
}

.qty-input, .text-input {
	flex: 1;
	height: 68rpx;
	background-color: #FFFFFF;
	border: 2rpx solid #E4E7ED;
	border-radius: 8rpx;
	padding: 0 20rpx;
	font-size: 26rpx;
	color: #2C405A;
	
	&:focus {
		border-color: #4A98CF;
		box-shadow: 0 0 0 2rpx rgba(74, 152, 207, 0.1);
	}
	
	&::placeholder {
		color: #A3B1C6;
	}
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 0;
}

.empty-text {
	font-size: 28rpx;
	color: #909399;
}

.botton {
	margin: 30rpx 24rpx !important;
	border-radius: 12rpx !important;
	font-weight: 500 !important;
	background: #4599AD;
	box-shadow: 0 4rpx 12rpx rgba(74, 152, 207, 0.2);
	
	&.disabled {
		opacity: 0.7;
		background: #909399 !important;
		pointer-events: none;
	}
}
</style>